/**
 * @Description: 在页面中切换主题，需要时可以在这个基础上修改
 * @Author: zhen
 * @Date: 2023-10-19
 */
import { computed } from 'vue';
import useGlobalStore from '@/stores/modules/useGlobalStore';
import { DEFAULT_PRIMARY, DEFAULT_COLORS } from '@/constants';
import { ElMessage } from 'element-plus';

// 主题颜色生成器 https://element.eleme.cn/#/zh-CN/component/custom-theme
// 深->浅
const orangeColor: string[] = [
  '#FF8450',
  '#ff9061',
  '#ff9d73',
  '#ffa985',
  '#ffb696',
  '#ffc2a8',
  '#ffcfba',
  '#ffdbcc',
  '#FFF3EE',
  // '#ffe8de',
  '#fff4f0'
];
const yellowColor: string[] = [
  '#d99643',
  '#ffb04f',
  '#ffbe6f',
  '#ffcd90',
  '#ffcd90',
  '#ffddb3',
  '#ffddb3',
  '#ffecd5',
  '#ffecd5',
  '#fff7ed'
];
const blueColor: string[] = [
  '#243373',
  '#2d4191',
  '#3851b5',
  '#4361d9',
  '#4f72ff',
  '#6f8bff',
  '#90a6ff',
  '#b3c2ff',
  '#d5ddff',
  '#edf1ff'
];

/**
 * @description 切换主题
 * */
export const useTheme = () => {
  const globalStore = useGlobalStore();
  const themeConfig = computed(() => globalStore.themeConfig);

  /**
   * 修改主题颜色
   * primary 主题颜色
   * */
  const changePrimary = (val: string, colors: string[], type: string) => {
    if (!val) {
      val = DEFAULT_PRIMARY;
      ElMessage({ type: 'success', message: `主题颜色已重置为 ${DEFAULT_PRIMARY}` });
    }
    // store中定义的修改主题方法 setThemeConfig
    globalStore.setThemeConfig({ ...themeConfig.value, primary: val });
    // 组件颜色
    document.documentElement.style.setProperty('--el-color-primary', themeConfig.value.primary);

    for (let i = 0; i < 9; i++) {
      document.documentElement.style.setProperty(`--el-color-primary-light-${i + 1}`, colors[i]);
    }
    document.documentElement.style.setProperty('--el-border-color-light', colors[9]);
    document.documentElement.style.setProperty('--el-border-color', '#DAD8D7');
    // 组件样式
    document.documentElement.style.setProperty('--el-border-radius-base', '4px');
    document.documentElement.style.setProperty('--el-input-border-color', '#C2C2C2');
    // document.documentElement.style.setProperty('--el-input-focus-border-color', themeConfig.value.primary)
    // document.documentElement.style.setProperty('--el-input-hover-border-color', themeConfig.value.primary)

    // 系列颜色特定配置
    if (type === 'orange') {
      document.documentElement.style.setProperty('--el-bg-color', '#FFFFFF');
      document.documentElement.style.setProperty('--el-text-color-primary', '#655C59');
      document.documentElement.style.setProperty('--el-button-text-color', '#655C59');
      document.documentElement.style.setProperty('--el-button-text-color-light', '#FFB04F');
      document.documentElement.style.setProperty('--el-font-weight-primary', '400');
      document.documentElement.style.setProperty('--el-text-color-regular', '#666666');
      document.documentElement.style.setProperty('--el-color-info-light-5', '#C2C2C2');
    } else if (type === 'yellow') {
      document.documentElement.style.setProperty('--el-bg-color', '#FFFFFF');
      document.documentElement.style.setProperty('--el-text-color-primary', '#655C59');
      document.documentElement.style.setProperty('--el-button-text-color', '#655C59');
      document.documentElement.style.setProperty('--el-button-text-color-light', '#655C59');
    } else {
      document.documentElement.style.setProperty('--el-bg-color', '#FFFFFF');
      document.documentElement.style.setProperty('--el-text-color-primary', '#655C59');
      document.documentElement.style.setProperty('--el-button-text-color', '#655C59');
      document.documentElement.style.setProperty('--el-button-text-color-light', '#655C59');
    }
  };

  // 切换主题颜色
  const changeThemeColor = (value: boolean, type: string) => {
    const body = document.documentElement as HTMLElement;
    if (!value) {
      globalStore.setThemeConfig({ ...themeConfig.value, isOrange: false, isYellow: false, isBlue: false });
      body.setAttribute('class', 'default');
      // 读取配置默认色
      changePrimary('', DEFAULT_COLORS, '');
      return;
    }

    if (type === 'orange') {
      globalStore.setThemeConfig({ ...themeConfig.value, isYellow: false, isBlue: false });
      // 配合 src/styles/theme/element-orange.scss 内 html.orange {} 可以修改全局样式
      body.setAttribute('class', type);
      changePrimary(orangeColor[0], orangeColor, type);
    } else if (type === 'yellow') {
      globalStore.setThemeConfig({ ...themeConfig.value, isOrange: false, isBlue: false });
      body.setAttribute('class', type);
      changePrimary(yellowColor[0], yellowColor, type);
    } else if (type === 'blue') {
      globalStore.setThemeConfig({ ...themeConfig.value, isYellow: false, isOrange: false });
      body.setAttribute('class', type);
      changePrimary(blueColor[4], blueColor, type);
    } else {
      body.setAttribute('class', 'default');
    }
  };

  // 初始化 theme 配置
  const initTheme = () => {
    if (themeConfig.value.isOrange) {
      changeThemeColor(true, 'orange');
    } else if (themeConfig.value.isYellow) {
      changeThemeColor(true, 'yellow');
    } else if (themeConfig.value.isBlue) {
      changeThemeColor(true, 'blue');
    } else {
      // 读取配置默认色
      changeThemeColor(false, 'default');
    }
  };

  return {
    initTheme,
    changePrimary,
    changeThemeColor
  };
};
